<template>
	<view class="content">
		<view class="panel">{{resultValue !== '0' ? resultValue : panelValue}}</view>
		<view class="func_area">
			<view class="btn_wrapper">
				<button class="btn function" @click="done('function', 'clear')">C</button>
				<button class="btn function" @click="done('function', 'nega')">+/-</button>
				<button class="btn function" @click="done('function', 'percent')">%</button>
				<button class="btn ufunc" @click="done('ufunc', 'devide')">÷</button>
			</view>
			<view class="btn_wrapper">
				<button class="btn number" @click="done('number', '7')">7</button>
				<button class="btn number" @click="done('number', '8')">8</button>
				<button class="btn number" @click="done('number', '9')">9</button>
				<button class="btn ufunc" @click="done('ufunc', 'times')">×</button>
			</view>
			<view class="btn_wrapper">
				<button class="btn number" @click="done('number', '4')">4</button>
				<button class="btn number" @click="done('number', '5')">5</button>
				<button class="btn number" @click="done('number', '6')">6</button>
				<button class="btn ufunc" @click="done('ufunc', 'minus')">-</button>
			</view>
			<view class="btn_wrapper">
				<button class="btn number" @click="done('number', '1')">1</button>
				<button class="btn number" @click="done('number', '2')">2</button>
				<button class="btn number" @click="done('number', '3')">3</button>
				<button class="btn ufunc" @click="done('ufunc', 'add')">+</button>
			</view>
			<view class="btn_wrapper">
				<button class="btn number zero" @click="done('number', '0')">0</button>
				<button class="btn number" @click="done('number', '.')">.</button>
				<button class="btn ufunc" @click="done('ufunc', 'equal')">=</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resultValue: '0', // 计算结果
				panelValue: '0', // 用户输入的值
				saveValue: '0', // 储存点击加减乘除后的旧值
				ufuncType: '', // 储存用户选择的计算方式（加减乘除等）
				needClear: false,
			}
		},
		onLoad() {
			
		},
		methods: {
			done(type, key) {
				if (type === 'function') {
					if (key === 'clear') {
						this.resultValue = '0';
						this.panelValue = '0';
						this.saveValue = '0';
						this.ufuncType = '';
					} else if (key === 'nega') {
						if (this.resultValue !== '0') {
							if (this.resultValue.indexOf('-') > -1) {
								this.resultValue = Math.abs(this.resultValue).toString()
							} else {
								this.resultValue = '-' + this.resultValue;
							}
						} else {
							if (this.panelValue.indexOf('-') > -1) {
								this.panelValue = Math.abs(this.panelValue).toString()
							} else {
								this.panelValue = '-' + this.panelValue;
							}
						}
					} else if (key === 'percent') {
						if (this.resultValue !== '0') {
							this.resultValue = '' + (Number(this.resultValue) / 100);
						} else {
							this.panelValue = '' + (Number(this.panelValue) / 100);
						}
					}
				} else if (type === 'ufunc') {
					if (this.resultValue !== '0') {
						this.saveValue = this.resultValue;
					} else {
						if (this.saveValue === '0' && key !== 'equal') {
							this.saveValue = this.panelValue;
						}
					}
					if (key === 'equal') {
						if (!this.ufuncType) return;
						if (this.ufuncType === 'devide') {
							this.resultValue = (((Number(this.saveValue) * 100) / (Number(this.panelValue) * 100)) / 100).toString();
						} else if (this.ufuncType === 'times') {
							this.resultValue = (((Number(this.saveValue) * 100) * (Number(this.panelValue) * 100)) / 100).toString();
						} else if (this.ufuncType === 'minus') {
							this.resultValue = (((Number(this.saveValue) * 100) - (Number(this.panelValue) * 100)) / 100).toString();
						} else if (this.ufuncType === 'add') {
							this.resultValue = (((Number(this.saveValue) * 100) + (Number(this.panelValue) * 100)) / 100).toString();
						}
						this.ufuncType = '';
					} else {
						this.ufuncType = key;
						this.needClear = true;
					}
				} else if (type === 'number') {
					if (this.resultValue !== '0') {
						this.panelValue = '0';
					}
					if (this.needClear) {
						this.panelValue = '0';
						this.needClear = false;
					}
					if (this.panelValue === '0') {
						if (key === '.') {
							this.panelValue = this.panelValue + key;
						} else {
							this.panelValue = key;
						}
					} else {
						this.panelValue = this.panelValue + key;
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		height: 100vh;
	}
	.panel {
		flex: 1;
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		color: #fff;
		font-size: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		word-break: break-all;
	}
	
	.func_area {
		height: 1100rpx;
	}
	.btn_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.btn {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 75rpx;
		margin-bottom: 40rpx;
	}
	
	.zero {
		width: calc(46%);
		border-radius: 75rpx;
	}
	
	.function {
		color: #000;
		background-color: #999;
	}
	
	.ufunc {
		color: #fff;
		background-color: orange;
	}
	
	.number {
		color: #fff;
		background-color: #333;
	}
</style>
